<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram - Ball and Mirror</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = 'italic 24px Times New Roman';

// --- Define parameters ---
const y_base = 320;
const ball_radius = 30;
const ball_x = 150;
const ball_y = y_base - ball_radius;

const mirror_base_x = 480;
const mirror_base_y = y_base;
// The problem's solution is α = 45 degrees. We'll use this for an accurate drawing.
const alpha_deg = 45; 
const alpha_rad = alpha_deg * Math.PI / 180;
const mirror_length = 350;

// --- Draw Horizontal Surface ---
ctx.beginPath();
ctx.moveTo(50, y_base);
ctx.lineTo(550, y_base);
ctx.moveTo(50, y_base + 5);
ctx.lineTo(550, y_base + 5);
ctx.stroke();

// --- Draw the Ball ---
ctx.beginPath();
ctx.arc(ball_x, ball_y, ball_radius, 0, 2 * Math.PI);
ctx.stroke();

// --- Draw Velocity Arrow ---
const arrow_y = ball_y;
const arrow_start_x = ball_x + ball_radius + 20;
const arrow_end_x = arrow_start_x + 100;
const arrow_head_length = 15;
const arrow_head_width = 8; 

// Arrow line
ctx.beginPath();
ctx.moveTo(arrow_start_x, arrow_y);
ctx.lineTo(arrow_end_x, arrow_y);
ctx.stroke();

// Arrow head (filled triangle)
ctx.beginPath();
ctx.moveTo(arrow_end_x, arrow_y);
ctx.lineTo(arrow_end_x - arrow_head_length, arrow_y - arrow_head_width);
ctx.lineTo(arrow_end_x - arrow_head_length, arrow_y + arrow_head_width);
ctx.closePath();
ctx.fill();

// --- Draw Inclined Mirror ---
const mirror_end_x = mirror_base_x - mirror_length * Math.cos(alpha_rad);
const mirror_end_y = mirror_base_y - mirror_length * Math.sin(alpha_rad);

ctx.beginPath();
ctx.moveTo(mirror_base_x, mirror_base_y);
ctx.lineTo(mirror_end_x, mirror_end_y);
ctx.stroke();

// Draw hatching on the back of the mirror
const num_hatches = 20;
const hatch_length = 10;
for (let i = 1; i <= num_hatches; i++) {
    const p = i / (num_hatches + 1);
    const x = mirror_base_x + p * (mirror_end_x - mirror_base_x);
    const y = mirror_base_y + p * (mirror_end_y - mirror_base_y);
    // Hatch lines are perpendicular to the mirror surface
    const hx = x + hatch_length * Math.sin(alpha_rad);
    const hy = y - hatch_length * Math.cos(alpha_rad);
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(hx, hy);
    ctx.stroke();
}

// --- Draw Angle Alpha ---
const arc_radius = 45;
ctx.beginPath();
ctx.arc(mirror_base_x, mirror_base_y, arc_radius, Math.PI - alpha_rad, Math.PI);
ctx.stroke();

// Draw angle label 'α'
const label_x = mirror_base_x - 35; 
const label_y = mirror_base_y - 15;
ctx.fillText('α', label_x, label_y);

</script>
</body>
</html>